Marko - Documentation

Getting Started

Marko is modern and elegant HTML5 Template for digital marketing agency. You can also use this creative template for any kind of business and services related to digital marketing, seo content, search ranking, onpage seo, offpage seo, keyword strategy, seo tools, content strategy, link building, seo copywriting, website traffic, google ranking, technical seo, content writing, digital visibility and all other digital marketing agency websites. etc. This template is built using HTML5, CSS3, JavaScript, and is supported by frameworks such as Bootstrap to provide a modern and responsive look.

File Structure

  • /Css - folder with css files including Font Awesome, Google Fonts, Animate, Bootstrap and custom styles
  • /Webfonts - folder with icon fonts using Font Awesome
  • /Image - folder with all images
  • /Js - folder with jQuery, Swiper, & custom JavaScript files

Customization

You can follow the following code structure which is made easy and simple to understand.
  • Code example
    • <!-- Banner -->
<div class="section-banner">
    <div class="banner-video">
        ...
    </div>
</div>


<!-- Section About Us -->
<div class="section">
...
</div>

<!-- Section Partnership -->
<div class="section-partner">
...
</div>


<!-- Section Footer -->
<div class="section bg-footer pb-0">
...
</div>
  • Changing Logo & Website Name
    • <a class="navbar-brand" href=""><img src="./image/Marko-Logo.png></a>
  • Change Icon
    • <i class="fa-solid fa-user"></i>
  • Changing Theme Color
    • :root{
--primary: #D1D1D1;
--text-color: #8B9B9B;
--accent-color: #C82AEF;
}

Components Overview

    • This section contains the navigation menu.

    <header> 
    <div class="hero-container">
        <nav class="navbar navbar-expand-xl">
            <div class="container-fluid">
                <div class="logo-container">
                <a class="navbar-brand" href="#"><img src="image/Marko-Logo.png" alt="" class="img-fluid"></a>
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa-solid fa-bars accent-color-2"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto mb-2 mb-xl-0 gap-xl-4 gap-1">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="about.html">About Us</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                Pages <i class="fa-solid fa-angle-down accent-color-2"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="casestudies.html">Case Studies</a></li>
                                <li><a class="dropdown-item" href="team.html">Our Team</a></li>
                                <li><a class="dropdown-item" href="partnership.html">Partnership</a></li>
                                <li><a class="dropdown-item" href="pricing.html">Pricing Plan</a></li>
                                <li><a class="dropdown-item" href="Testimonials.html">Testimonials</a></li>
                                <li><a class="dropdown-item" href="faq.html">FAQs</a></li>
                                <li><a class="dropdown-item" href="404_page.html">404 Page</a></li>
                            </ul>
                        </li>
                    </ul>
                    <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="contact.html">Contact Us</a>
                        </li>
                </div>
            </div>
        </nav>
    </div>
</header>

    • It is present on every page to display website information.

    <footer> 
    <div class="section position-relative text-white pb-0 ">
        <div class="row row-cols-xl-4 row-cols-md-2 row-cols-1">
            <div class="col mb-3">
                <img src="./image/Marko-Logo.png" alt="logo" class="img-fluid logo">
                <p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Vel quam elementum pulvinar etiam.
                </p>
            </div>
        </div>
        <div class="col mb-3">
            <h3>Quick Links</h3>
            <p>...<>
        </div>
        <div class=col mb-3>
            <h3>Services</h3>
            ...
        </div>
        <span class="text-white">© 2025 Marko. Fox Creation All Rights Reserved.</span>
    </div>
</footer>

Dependencies

his template uses several libraries and frameworks to improve its appearance and functionality: